<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>超级管理员 - 乒乓球培训管理系统</title>
  <link rel="stylesheet" href="../assets/css/common.css">
  <style>
    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }

    .stat-card {
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: white;
      padding: 24px;
      border-radius: 8px;
      text-align: center;
    }

    .stat-number {
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 14px;
      opacity: 0.9;
    }

    .tab-container {
      background: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .tab-header {
      display: flex;
      background: var(--bg-light);
      border-bottom: 1px solid var(--border-color);
    }

    .tab-btn {
      flex: 1;
      padding: 16px 24px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .tab-btn.active {
      background: white;
      color: var(--primary-color);
      font-weight: 600;
      border-bottom: 2px solid var(--primary-color);
    }

    .tab-content {
      padding: 24px;
    }

    .tab-pane {
      display: none;
    }

    .tab-pane.active {
      display: block;
    }

    .action-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .search-box {
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .search-box input {
      width: 250px;
    }

    .license-status {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: #f0f8ff;
      border: 1px solid #b3d9ff;
      border-radius: 6px;
      margin-bottom: 20px;
    }

    .license-status.expired {
      background: #fff2f0;
      border-color: #ffccc7;
    }

    .license-info {
      flex: 1;
    }

    .license-key {
      font-family: monospace;
      background: rgba(0, 0, 0, 0.05);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    }

    .campus-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 20px;
    }

    .campus-form .form-group:last-child {
      grid-column: 1 / -1;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="page-header">
      <h1 class="page-title">超级管理员控制台</h1>
      <div>
        <span class="text-muted">欢迎，管理员</span>
        <button class="btn btn-secondary btn-sm" onclick="logout()" style="margin-left: 12px;">退出登录</button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="dashboard-stats">
      <div class="stat-card">
        <div class="stat-number" id="totalCampuses">5</div>
        <div class="stat-label">校区总数</div>
      </div>
      <div class="stat-card">
        <div class="stat-number" id="totalUsers">1,234</div>
        <div class="stat-label">用户总数</div>
      </div>
      <div class="stat-card">
        <div class="stat-number" id="monthlyRevenue">¥45,678</div>
        <div class="stat-label">本月收入</div>
      </div>
      <div class="stat-card">
        <div class="stat-number" id="licenseStatus">正常</div>
        <div class="stat-label">许可状态</div>
      </div>
    </div>

    <!-- 功能标签页 -->
    <div class="tab-container">
      <div class="tab-header">
        <button class="tab-btn active" onclick="switchTab('campus')">校区管理</button>
        <button class="tab-btn" onclick="switchTab('license')">许可管理</button>
        <button class="tab-btn" onclick="switchTab('monitor')">全局监控</button>
      </div>

      <!-- 校区管理 -->
      <div id="campusTab" class="tab-content tab-pane active">
        <div class="action-bar">
          <h3>校区管理</h3>
          <div class="search-box">
            <input type="text" class="form-control" placeholder="搜索校区..." id="campusSearch">
            <button class="btn btn-primary" onclick="showAddCampusModal()">新建校区</button>
          </div>
        </div>

        <div id="campusTable"></div>
      </div>

      <!-- 许可管理 -->
      <div id="licenseTab" class="tab-content tab-pane">
        <div class="license-status">
          <div class="license-info">
            <h4>当前许可状态</h4>
            <p><strong>许可密钥：</strong><span class="license-key">PPMS-2024-ABCD-1234-EFGH</span></p>
            <p><strong>到期时间：</strong>2024-12-31 23:59:59</p>
            <p><strong>绑定设备：</strong>MacBook-Pro-2023 (MAC: AA:BB:CC:DD:EE:FF)</p>
          </div>
          <button class="btn btn-warning">续费许可</button>
        </div>

        <div class="card">
          <div class="card-header">许可购买记录</div>
          <div class="card-body">
            <div id="licenseHistoryTable"></div>
          </div>
        </div>
      </div>

      <!-- 全局监控 -->
      <div id="monitorTab" class="tab-content tab-pane">
        <div class="row">
          <div class="col-6">
            <div class="card">
              <div class="card-header">各校区用户统计</div>
              <div class="card-body">
                <div id="campusUserStats"></div>
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="card">
              <div class="card-header">财务统计</div>
              <div class="card-body">
                <div id="financialStats"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="card mt-3">
          <div class="card-header">系统活动日志</div>
          <div class="card-body">
            <div id="activityLog"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新建校区模态框 -->
  <div id="addCampusModal" class="modal-overlay" style="display: none;">
    <div class="modal">
      <div class="modal-header">
        <h3 class="modal-title">新建校区</h3>
        <button class="modal-close" onclick="hideAddCampusModal()">&times;</button>
      </div>
      <div class="modal-body">
        <form id="campusForm" onsubmit="handleAddCampus(event)">
          <div class="campus-form">
            <div class="form-group">
              <label class="form-label">校区名称</label>
              <input type="text" class="form-control" name="name" required>
            </div>
            <div class="form-group">
              <label class="form-label">校区类型</label>
              <select class="form-control form-select" name="type" required>
                <option value="">请选择</option>
                <option value="center">中心校区</option>
                <option value="branch">分校区</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">联系人</label>
              <input type="text" class="form-control" name="contactName" required>
            </div>
            <div class="form-group">
              <label class="form-label">联系电话</label>
              <input type="tel" class="form-control" name="phone" required>
            </div>
            <div class="form-group">
              <label class="form-label">邮箱</label>
              <input type="email" class="form-control" name="email" required>
            </div>
            <div class="form-group">
              <label class="form-label">校区地址</label>
              <textarea class="form-control" name="address" rows="3" required></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="hideAddCampusModal()">取消</button>
        <button class="btn btn-primary" onclick="document.getElementById('campusForm').requestSubmit()">创建</button>
      </div>
    </div>
  </div>

  <script src="../assets/js/common.js"></script>
  <script>
    // 模拟数据
    const campusData = [
      {
        id: '1',
        name: '中心校区',
        type: '中心校区',
        contactName: '张主任',
        phone: '138-0000-0001',
        email: 'center@ppms.com',
        address: '北京市朝阳区体育馆路1号',
        students: 156,
        coaches: 12,
        status: '正常'
      },
      {
        id: '2',
        name: '东区分校',
        type: '分校区',
        contactName: '李经理',
        phone: '138-0000-0002',
        email: 'east@ppms.com',
        address: '北京市朝阳区东四环中路88号',
        students: 89,
        coaches: 8,
        status: '正常'
      },
      {
        id: '3',
        name: '西区分校',
        type: '分校区',
        contactName: '王老师',
        phone: '138-0000-0003',
        email: 'west@ppms.com',
        address: '北京市海淀区西三环北路66号',
        students: 124,
        coaches: 10,
        status: '正常'
      }
    ];

    const licenseHistory = [
      {
        id: '1',
        orderNo: 'LIC-2024-001',
        amount: '¥500.00',
        period: '2024-01-01 至 2024-12-31',
        status: '已激活',
        purchaseTime: '2024-01-01 10:30:00'
      },
      {
        id: '2',
        orderNo: 'LIC-2023-001',
        amount: '¥500.00',
        period: '2023-01-01 至 2023-12-31',
        status: '已过期',
        purchaseTime: '2023-01-01 09:15:00'
      }
    ];

    const activityLogs = [
      {
        id: '1',
        time: '2024-01-15 14:30:00',
        user: '张主任',
        action: '审核教练',
        detail: '审核通过教练"李教练"的注册申请',
        campus: '中心校区'
      },
      {
        id: '2',
        time: '2024-01-15 14:25:00',
        user: '学员小明',
        action: '预约课程',
        detail: '预约了张教练的课程，时间：2024-01-16 15:00',
        campus: '东区分校'
      },
      {
        id: '3',
        time: '2024-01-15 14:20:00',
        user: '王老师',
        action: '充值',
        detail: '学员小红充值 ¥200.00',
        campus: '西区分校'
      }
    ];

    function switchTab(tabName) {
      // 切换标签按钮状态
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
      event.target.classList.add('active');

      // 切换内容面板
      document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
      document.getElementById(tabName + 'Tab').classList.add('active');

      // 加载对应数据
      switch(tabName) {
        case 'campus':
          loadCampusTable();
          break;
        case 'license':
          loadLicenseHistory();
          break;
        case 'monitor':
          loadMonitorData();
          break;
      }
    }

    function loadCampusTable() {
      const columns = [
        { key: 'name', title: '校区名称' },
        { key: 'type', title: '类型' },
        { key: 'contactName', title: '联系人' },
        { key: 'phone', title: '电话' },
        { key: 'students', title: '学员数' },
        { key: 'coaches', title: '教练数' },
        { 
          key: 'status', 
          title: '状态',
          render: (value) => `<span class="status-badge status-success">${value}</span>`
        }
      ];

      const actions = [
        { text: '编辑', class: 'btn-primary', onclick: 'editCampus' },
        { text: '查看详情', class: 'btn-secondary', onclick: 'viewCampus' },
        { text: '删除', class: 'btn-danger', onclick: 'deleteCampus' }
      ];

      Table.render('campusTable', columns, campusData, { actions });
    }

    function loadLicenseHistory() {
      const columns = [
        { key: 'orderNo', title: '订单号' },
        { key: 'amount', title: '金额' },
        { key: 'period', title: '有效期' },
        { 
          key: 'status', 
          title: '状态',
          render: (value) => {
            const statusClass = value === '已激活' ? 'status-success' : 'status-error';
            return `<span class="status-badge ${statusClass}">${value}</span>`;
          }
        },
        { key: 'purchaseTime', title: '购买时间' }
      ];

      Table.render('licenseHistoryTable', columns, licenseHistory);
    }

    function loadMonitorData() {
      // 校区用户统计
      const campusStats = campusData.map(campus => 
        `<div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;">
          <span>${campus.name}</span>
          <span>学员: ${campus.students} | 教练: ${campus.coaches}</span>
        </div>`
      ).join('');
      document.getElementById('campusUserStats').innerHTML = campusStats;

      // 财务统计
      const financialData = `
        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;">
          <span>本月充值</span>
          <span class="text-success">¥25,680.00</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;">
          <span>本月消费</span>
          <span class="text-primary">¥18,750.00</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #eee;">
          <span>本月退款</span>
          <span class="text-warning">¥1,250.00</span>
        </div>
        <div style="display: flex; justify-content: space-between; padding: 8px 0; font-weight: 600;">
          <span>净收入</span>
          <span class="text-success">¥6,180.00</span>
        </div>
      `;
      document.getElementById('financialStats').innerHTML = financialData;

      // 活动日志
      const logColumns = [
        { key: 'time', title: '时间' },
        { key: 'user', title: '用户' },
        { key: 'action', title: '操作' },
        { key: 'detail', title: '详情' },
        { key: 'campus', title: '校区' }
      ];

      Table.render('activityLog', logColumns, activityLogs);
    }

    function showAddCampusModal() {
      document.getElementById('addCampusModal').style.display = 'flex';
    }

    function hideAddCampusModal() {
      document.getElementById('addCampusModal').style.display = 'none';
      document.getElementById('campusForm').reset();
    }

    function handleAddCampus(event) {
      event.preventDefault();
      const formData = new FormData(event.target);
      
      // 创建新校区数据
      const newCampus = {
        id: Utils.generateId(),
        name: formData.get('name'),
        type: formData.get('type') === 'center' ? '中心校区' : '分校区',
        contactName: formData.get('contactName'),
        phone: formData.get('phone'),
        email: formData.get('email'),
        address: formData.get('address'),
        students: 0,
        coaches: 0,
        status: '正常'
      };

      campusData.push(newCampus);
      loadCampusTable();
      hideAddCampusModal();
      Utils.showMessage('校区创建成功！', 'success');
    }

    function editCampus(id) {
      Utils.showMessage('编辑功能开发中...', 'info');
    }

    function viewCampus(id) {
      const campus = campusData.find(c => c.id === id);
      if (campus) {
        const content = `
          <div style="line-height: 1.8;">
            <p><strong>校区名称：</strong>${campus.name}</p>
            <p><strong>类型：</strong>${campus.type}</p>
            <p><strong>联系人：</strong>${campus.contactName}</p>
            <p><strong>电话：</strong>${campus.phone}</p>
            <p><strong>邮箱：</strong>${campus.email}</p>
            <p><strong>地址：</strong>${campus.address}</p>
            <p><strong>学员数：</strong>${campus.students}</p>
            <p><strong>教练数：</strong>${campus.coaches}</p>
            <p><strong>状态：</strong><span class="status-badge status-success">${campus.status}</span></p>
          </div>
        `;
        
        const modalId = Modal.create('校区详情', content, [
          { text: '关闭', class: 'btn-secondary' }
        ]);
        Modal.show(modalId);
      }
    }

    function deleteCampus(id) {
      Utils.confirm('确定要删除这个校区吗？此操作不可恢复。', () => {
        const index = campusData.findIndex(c => c.id === id);
        if (index > -1) {
          campusData.splice(index, 1);
          loadCampusTable();
          Utils.showMessage('校区删除成功！', 'success');
        }
      });
    }

    function logout() {
      Utils.confirm('确定要退出登录吗？', () => {
        if (window.parent && window.parent.switchPage) {
          window.parent.switchPage('auth.html', 'login');
        } else {
          window.location.href = 'auth.html';
        }
      });
    }

    // 页面加载时初始化
    document.addEventListener('DOMContentLoaded', function() {
      loadCampusTable();
    });
  </script>
</body>
</html>
